<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="shortcut icon" href="${pageContext.request.contextPath }/bootstrapStyle/img/favicon.ico">
<link href="${pageContext.request.contextPath }/bootstrapStyle/css/style.min.css?v=4.0.0" rel="stylesheet">
<link href="${pageContext.request.contextPath }/bootstrapStyle/css/animate.min.css" rel="stylesheet">
<link href="${pageContext.request.contextPath }/bootstrapStyle/css/bootstrap.min.css?v=3.3.5" rel="stylesheet">
<link href="${pageContext.request.contextPath}/bootstrapStyle/css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
<link href="${pageContext.request.contextPath }/bootstrapStyle/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/bootstrapStyle/css/jquery-confirm.css"/>
<title>我发送的消息</title>
</head>
<body>
	<div class="panel panel-default">
	    <div class="panel-body form-group" style="margin-top: 0px;">
	        <label class="col-sm-1 control-label" style="text-align: right; margin-top:5px">姓名：</label>
	        <div class="col-sm-2">
	            <input type="text" class="form-control" name="Name" id="search_name"/>
	        </div>
	        <label class="col-sm-1 control-label" style="text-align: right; margin-top:5px">手机号：</label>
	        <div class="col-sm-2">
	            <input type="text" class="form-control" name="Name" id="search_tel"/>
	        </div>
	        <div class="col-sm-1 col-sm-offset-4">
	            <button class="btn btn-primary" id="search_btn">查询</button>
	        </div>
	     </div>
	</div>
	<!-- 动态加载table -->
	<table id="messagetab" class="table table-hover"></table>
	
	<script src="${pageContext.request.contextPath }/bootstrapStyle/js/jquery.min.js?v=2.1.4"></script>
    <script src="${pageContext.request.contextPath }/bootstrapStyle/js/bootstrap.min.js"></script>
    <script src="${pageContext.request.contextPath }/bootstrapStyle/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
    <script src="${pageContext.request.contextPath }/bootstrapStyle/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
    <script src="${pageContext.request.contextPath }/bootstrapStyle/js/jquery-confirm.js"></script>
    <script type="text/javascript">
		//根据窗口调整表格高度
	    $(window).resize(function() {
	        $('#messagetab').bootstrapTable('resetView', {
	            height: tableHeight()
	        })
	    })
	    
	    //tableHeight函数
    	function tableHeight(){
        	//可以根据自己页面情况进行调整
        	return $(window).height();
    	}
	  	//查询按钮事件
	    $('#search_btn').click(function(){
	        //$('#doctortab').bootstrapTable('refresh');
	        $('#messagetab').bootstrapTable('refresh',{url: '${pageContext.request.contextPath}/Main/MyMessageMan/MySendedMessageAjax.action'});
	    })
		//刷新当前页tab，重新向服务器请求数据
  		function refreshTab(){
  			$('#messagetab').bootstrapTable('refresh');
  		}
		
  		//生成用户数据
  	    $('#messagetab').bootstrapTable({
  	        method: 'get',
  	        contentType: "application/x-www-form-urlencoded",//必须要有！！！！
  	        url:"${pageContext.request.contextPath}/Main/MyMessageMan/MySendedMessageAjax.action",//要请求数据的文件路径
  	        height:tableHeight(),//高度调整
  	        striped: true, //是否显示行间隔色
  	        dataField: "rows",//bootstrap table 可以前端分页也可以后端分页，这里
  	        //我们使用的是后端分页，后端分页时需返回含有total：总记录数,这个键值好像是固定的  
  	        //rows： 记录集合 键值可以修改  dataField 自己定义成自己想要的就好
  	        pageNumber: 1, //初始化加载第一页，默认第一页
  	        pagination:true,//是否分页
  	        queryParamsType:'limit',//查询参数组织方式
  	        queryParams:function(params) {//自定义参数，这里的参数是传给后台的，我这是是分页用的    
  	            return {//这里的params是table提供的    
  	                offset : params.offset,//从数据库第几条记录开始    
  	                limit : params.limit,
  	                type:null
  	            //找多少条    
  	            };},//请求服务器时所传的参数
  	        sidePagination:'server',//指定服务器端分页
  	        pageSize:10,//单页记录数
  	        pageList:[1,5,10,30,50,100],//分页步进值
  	        showRefresh:true,//刷新按钮
  	        showColumns:true,
  	        clickToSelect: true,//是否启用点击选中行
  	        toolbarAlign:'right',//工具栏对齐方式
  	        buttonsAlign:'right',//按钮对齐方式
  	        toolbar:'#toolbar',//指定工作栏
  	        columns:[
  	            {
  	                title:'全选',
  	                field:'select',
  	                //复选框
  	                checkbox:true,
  	                width:25,
  	                align:'center',
  	                valign:'middle'
  	            },
  	            {
  	                title:'消息ID',
  	                field:'notificationid',
  	              	align:'center',
  	                visible:true
  	            },
  	            {
  	                title:'消息标题',
  	                field:'notificationtitle',
  	                sortable:true,
  	              	align:'center',
  	                formatter:nullChange
  	            },
  	            {
  	                title:'消息内容',
  	                field:'notificationwords',
  	                sortable:true,
  	              	align:'center',
  	                formatter:nullChange
  	            },
  	            {
  	                title:'消息类型ID',
  	                field:'notificationtypeid',
  	                sortable:true,
  	              	align:'center',
  	                formatter:nullChange
  	            },
  	            {
  	                title:'消息类型名称',
  	                field:'notificationtypename',
  	                sortable:true,
  	              	align:'center',
  	                formatter:nullChange
  	            },
  	            {
  	                title:'消息创建时间',
  	                field:'notificationcreatetime',
  	                sortable:true,
  	              	align:'center',
  	                formatter:nullChange
  	            },
  	            {
  	                title:'消息是否已读',
  	                field:'notificationread',
  	                sortable:true,
  	              	align:'center',
  	                formatter:BooleanToString
  	            },
  	            {
  	                title:'消息读取时间',
  	                field:'notificationreadtime',
  	                sortable:true,
  	              	align:'center',
  	                formatter:nullChange
  	            },
  	            {
  	                title:'操作',
  	                field:'notificationdata',
  	                align:'center',
  	                //列数据格式化
  	                formatter:operateConfirm
  	            }
  	        ],
  	        locale:'zh-CN',//中文支持,
  	        responseHandler:function(rows){
  	            //在ajax获取到数据，渲染表格之前，修改数据源
  	            return rows;
  	        }
  	    })
  	    
  	    //对所有空值规格化，null-》未填写
    	function nullChange(value,row,index){
			if(value=='null' || value==''){
				return '未填写'
			}else{
				return value;
			}
		}
  		
  		//对所有接收到的Boolean类型的字段规范化
  		function BooleanToString(value,row,index){
  			if(value=='true'){
  				return '<i class="fa fa-unlock" style="color:green"></i>&nbsp;消息已读';
  			}else{
  				return '<i class="fa fa-lock" style="color:red"></i>&nbsp;消息未读';
  			}
  		}
  		
  		//操作序列规则化
  		function operateConfirm(value,row,index){
  			return '<button class="btn btn-info" style="height:30px">详情</button>';
  		}
    </script>
</body>
</html>